<template>
	<view class="integral">
		<view class="list">
			<view class="item">
				<view class="item-top" @click="dropDown($event,this)" style="font-size: 32rpx;">
					<view class="item-top_date">
						<text>{{dateList.dateTitle}}</text>
						<uni-icons :type="iconType" class="icons" size="40rpx"></uni-icons>
					</view>
					<view class="item-top_detion">
						<view class="capture">
							<text>获得：{{dateList.acquire}}</text>
						</view>
						<view class="disappear">
							<text>消耗：{{dateList.consume}}</text>
						</view>
					</view>
				</view>
				<view class="item-botmAll" :style="{height:style.height,opacity:style.opacity,overflow:style.overflow}">
					<view class="item-botm" v-for="(val,index) in dateList.chriderList" :key="index">
						<view class="item-botm_left">
							<text class="left1">{{val.moveAbout}}</text>
							<text class="left2">{{val.content}}</text>
						</view>
						<view class="item-botm_right">
							<text class="right1"
								:style="{'color':val.divide?'#467ed7':'#969696'}">{{val.divide?'+' + val.integral:'-' + val.integral}}</text>
							<text class="right2">{{val.date}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Integral',
		props: {
			dateList: {
				type: Object,
				default: {},
			}
		},
		data() {
			return {
				iconType: 'top',
				heightShow: false,
				style: {
					height: 0,
					opacity: 0,
					overflow: 'hidden'
				},
			}
		},
		created() {
			if (this.dateList.id === 0) {
				this.iconType = 'bottom';
				this.style.height = 416.0625;
				this.style.overflow = 'auto';
				this.style.opacity = 1;
				this.heightShow = true;
			}
		},
		methods: {
			dropDown(event, s) {
				this.heightShow = !this.heightShow;
				if (this.heightShow) {
					this.iconType = 'bottom';
					this.style.height = 416.0625;
					this.style.overflow = 'auto';
					this.style.opacity = 1;

				} else {
					this.iconType = 'top';
					this.style = {
						height: 0,
						overflow: 'hidden'
					}
					setTimeout(() => {
						this.style.opacity = 0;
					}, 500)
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/style/flex.scss';
	$blur: #467ed7;
	$size: #969696;
	$borderBottom: #f1f1f1;

	.integral {
		.list {
			.item {
				.item-top {
					padding: 40rpx;
					border-bottom: 1rpx solid $borderBottom;

					>.item-top_date,
					.icons {
						font-size: 40rpx;
						font-weight: bold;
					}

					.item-top_detion {
						@include flex-r;
						margin-top: 20rpx;

						.capture {
							color: $blur;
							margin-right: 20rpx;
						}

						.disappear {
							color: $size;
						}
					}
				}

				.item-botmAll {
					transition: height .5s;

					.item-botm {
						@include flex-r-between-start;
						padding: 40rpx 30rpx 40rpx 0;
						margin-left: 40rpx;
						border-bottom: 1rpx solid $borderBottom;


						.item-botm_left {
							@include flex-c;

							.left1 {
								font-weight: bold;
								margin-bottom: 40rpx;
							}

							.left2 {
								color: $size;
							}
						}

						.item-botm_right {
							@extend .item-botm_left;

							.right1 {
								color: $blur;
								font-weight: bold;
								margin-bottom: 40rpx;
								align-self: flex-end;
							}

							.right2 {
								color: $size;
							}
						}
					}
				}

			}
		}
	}
</style>